/*
 * @Autor: dc
 * @Date: 2022-03-01 14:41:03
 * @LastEditors: dc
 * @LastEditTime: 2022-03-16 11:23:09
 * @Description: 
 */

import React, { Component } from "react";
import './App.css'

import Header from "./components/Header";
import List from "./components/List";
import Footer from "./components/Footer";





// 创建并暴露组件App
export default class App extends Component {
    state = {
        todos: [
            { id: 1, name: '吃饭', done: true },
            { id: 2, name: '睡觉', done: true },
            { id: 3, name: '板砖', done: false },
        ],
        is_allSelect: false,
    }
    // 添加todos
    addTodos = (todoObj) => {
        const { todos } = this.state;
        const newTodos = [todoObj, ...todos];
        this.setState({
            todos: newTodos
        })
        this.listening();

    }
    // 删除指定todos数据
    delTodos = (id) => {
        const { todos } = this.state;
        let arr = todos.filter(item => {
            return item.id !== id;
        })
        this.setState({
            todos: arr
        })
        this.listening();

    }
    // 勾选todos
    checkTodos = (id) => {
        const { todos } = this.state;
        let arr = todos.map(item => {
            if (item.id === id) {
                item.done = !item.done
            }
            return item
        })
        this.setState({
            todos: arr
        })
        this.listening();
    }
    // 监听是否全选了
    listening = () => {
        const { todos } = this.state;
        let arr = todos.filter(item => {
            return item.done;
        })
        console.log(arr.length, this.state.todos.length)
        let is_allSelect = false;
        if (arr.length === todos.length && arr.length !== 0) {
            is_allSelect = true
        }
        this.setState({
            is_allSelect: is_allSelect,
        })
    }
    // 全选操作
    allTodos = () => {
        const { todos, is_allSelect } = this.state;
        let arr = todos.map(e => {
            e.done = !is_allSelect
            return e;
        })
        this.setState({
            is_allSelect: !is_allSelect,
            todos: arr
        })
    }
    // 删除已完成
    delComplete = () => {
        const { todos } = this.state;
        let arr = todos.filter(e => {
            return !e.done;
        })
        console.log(arr)
        this.setState({
            todos: arr
        })
        this.listening();
    }
    render() {
        const { todos, is_allSelect } = this.state
        return (
            <div className="center_div">
                <Header addTodos={this.addTodos}></Header>
                <List todos={todos} checkTodos={this.checkTodos}
                    delTodos={this.delTodos}></List>
                <Footer
                    todos={todos}
                    is_allSelect={is_allSelect}
                    delComplete={this.delComplete}
                    allTodos={this.allTodos}></Footer>
            </div>
        )
    }
}
